<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./main.css">
</head>
<body>
  <!-- <h1>珠峰培训</h1> -->
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/73/three.min.js"></script>



<script>
  // 创造出一场景
  var scene = new THREE.Scene()

  // 创建一个相机
  // 第一个参数是 视角
  // 第二个参数是横纵比
  // 第3个参数 代表 近面的距离
  // 第4个参数 代表 远面的距离
  var camera = new THREE.PerspectiveCamera(65, window.innerWidth/window.innerHeight,100,10000)

  // 创造一个渲染器
  var renderer = new THREE.WebGLRenderer({
    antialias: true
  })
  renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染器的大小
  document.body.appendChild(renderer.domElement)  // 把创造好的的canvas添加到页面上


  // 创造一个几何体
  var geometry = new THREE.BoxGeometry(100, 100, 100)
  // 几何体的材料
  var material = new THREE.MeshBasicMaterial({color: 0x00ff00})
  // 把几何体和材料合起来
  var cube = new THREE.Mesh(geometry, meterial)
  cube.rotation.x = 0.3
  cube.rotation.y = 0.5
  // 把网格 放到场景中
  sence.add(cube)

  // 给相机设置位置
  camera.position.z = 500
  renderer.render(sence, camera)

  function animate() {
    requestAnimationFrame(animate)  // 递归
    cube.rotation.x += 0.1
    cube.rotation.y += 0.1
    renderer.render(sence, camera)
  }
  animate()

</script>
<!-- 着色器语言 -->
<script type="shader/vertex" id="vertexShader">
  attribute float scale;
  void main() {
    vec4 mvPosition
  }
</script>
<script>
  var scene, camera, renderer;
  var countX = 100, countY = 100, space = 120;
  var w = window.innerWidth, h = window.innerHeight;

  function init() {
    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(65, w/h, 100, 10000)
    camera.position.z = 1000

    var nums = countX * countY  // 一共有的点数
    var positions = new Float32Array(nums*3) // 用来记录每个点的位置
    var scales = new Float32Array(nums) // 用来记录每个点的缩放倍数
    var i = 0, j = 0
    for (let x = 0; x < countX; x++) {
      for (let y = 0; y < countY; y++) {
        positions[i] = x*space - (countX*space)/2
        positions[i+1] = 0
        positions[i+2] = y*space - (countY*space)/2
        // 因为每个店都有3个坐标值（x,y,z）;
        // 所以positions中的个数是点个数的3倍，每3个是一个点的坐标
        scales[j] = 30
        i+=3
        j++
      }
    }

    var geometry = new THREE.BufferGeometry()
    geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3))
    geometry.addAttribute('scale', new THREE.BufferAttribute(scale, 1))

    var material = new THREE.ShaderMaterial({
      uniforms: {
        color:{value: new THREE.Color(0x00ff00), type:'c'}  // 新版不需要type
      },
      vertexShader:'',
      fragmentShader: ''
    })
  }
</script>